<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="./css/manguLeheCss.css" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Pearl Harbor</title>
<script type="text/javascript" src="./js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="./js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript" src="./js/jquery.ba-throttle-debounce.min.js"></script>
<script type="text/javascript" src="./js/jQueryRotateCompressed.2.2.js"></script>
<!-- <script type="text/javascript" src="./js/manguLehtHelid.js"></script>-->
<script type="text/javascript" src="./js/manguMootor.js"></script>
<script type="text/javascript" src="./js/manguLehtUI.js"></script>
<!-- <script type="text/javascript" src="./js/manguMootorServer.js"></script> -->
<script type="text/javascript" src="./js/manguLocalStorageLoad.js"></script>
<script type="text/javascript" src="./js/replayPage.js"></script>
</head>
<body>
<div id="pais">
<h1 id="pealkiri">Pearl Harbor</h1>
</div>
<div id="tbl">
<div id="flags">
<img id="FJ" src="./pic/JapanFlag.png" alt="Flag of Japan"/>
<div id="messageBox">
</div>
<img id="FU" src="./pic/USFlag.png" alt="Flag of USA"/>
</div>
<div id="gridsAndShips">
<div class="gridDivWrapper">
<div id="lGrid" class="gridDiv">
<div class="row">
<div id="L1,1" class="square"></div> 
<div id="L1,2" class="square"></div> 
<div id="L1,3" class="square"></div> 
<div id="L1,4" class="square"></div> 
<div id="L1,5" class="square"></div> 
<div id="L1,6" class="square"></div> 
<div id="L1,7" class="square"></div> 
<div id="L1,8" class="square"></div> 
<div id="L1,9" class="square"></div> 
<div id="L1,10" class="square"></div> 
</div>
<div class="row">
<div id="L2,1" class="square"></div> 
<div id="L2,2" class="square"></div> 
<div id="L2,3" class="square"></div> 
<div id="L2,4" class="square"></div> 
<div id="L2,5" class="square"></div> 
<div id="L2,6" class="square"></div> 
<div id="L2,7" class="square"></div> 
<div id="L2,8" class="square"></div> 
<div id="L2,9" class="square"></div> 
<div id="L2,10" class="square"></div> 
</div>
<div class="row">
<div id="L3,1" class="square"></div> 
<div id="L3,2" class="square"></div> 
<div id="L3,3" class="square"></div> 
<div id="L3,4" class="square"></div> 
<div id="L3,5" class="square"></div> 
<div id="L3,6" class="square"></div> 
<div id="L3,7" class="square"></div> 
<div id="L3,8" class="square"></div> 
<div id="L3,9" class="square"></div> 
<div id="L3,10" class="square"></div> 
</div>
<div class="row">
<div id="L4,1" class="square"></div> 
<div id="L4,2" class="square"></div> 
<div id="L4,3" class="square"></div> 
<div id="L4,4" class="square"></div> 
<div id="L4,5" class="square"></div> 
<div id="L4,6" class="square"></div> 
<div id="L4,7" class="square"></div> 
<div id="L4,8" class="square"></div> 
<div id="L4,9" class="square"></div> 
<div id="L4,10" class="square"></div> 
</div>
<div class="row">
<div id="L5,1" class="square"></div> 
<div id="L5,2" class="square"></div> 
<div id="L5,3" class="square"></div> 
<div id="L5,4" class="square"></div> 
<div id="L5,5" class="square"></div> 
<div id="L5,6" class="square"></div> 
<div id="L5,7" class="square"></div> 
<div id="L5,8" class="square"></div> 
<div id="L5,9" class="square"></div> 
<div id="L5,10" class="square"></div> 
</div>
<div class="row">
<div id="L6,1" class="square"></div> 
<div id="L6,2" class="square"></div> 
<div id="L6,3" class="square"></div> 
<div id="L6,4" class="square"></div> 
<div id="L6,5" class="square"></div> 
<div id="L6,6" class="square"></div> 
<div id="L6,7" class="square"></div> 
<div id="L6,8" class="square"></div> 
<div id="L6,9" class="square"></div> 
<div id="L6,10" class="square"></div> 
</div>
<div class="row">
<div id="L7,1" class="square"></div> 
<div id="L7,2" class="square"></div> 
<div id="L7,3" class="square"></div> 
<div id="L7,4" class="square"></div> 
<div id="L7,5" class="square"></div> 
<div id="L7,6" class="square"></div> 
<div id="L7,7" class="square"></div> 
<div id="L7,8" class="square"></div> 
<div id="L7,9" class="square"></div> 
<div id="L7,10" class="square"></div> 
</div>
<div class="row">
<div id="L8,1" class="square"></div> 
<div id="L8,2" class="square"></div> 
<div id="L8,3" class="square"></div> 
<div id="L8,4" class="square"></div> 
<div id="L8,5" class="square"></div> 
<div id="L8,6" class="square"></div> 
<div id="L8,7" class="square"></div> 
<div id="L8,8" class="square"></div> 
<div id="L8,9" class="square"></div> 
<div id="L8,10" class="square"></div> 
</div>
<div class="row">
<div id="L9,1" class="square"></div> 
<div id="L9,2" class="square"></div> 
<div id="L9,3" class="square"></div> 
<div id="L9,4" class="square"></div> 
<div id="L9,5" class="square"></div> 
<div id="L9,6" class="square"></div> 
<div id="L9,7" class="square"></div> 
<div id="L9,8" class="square"></div> 
<div id="L9,9" class="square"></div> 
<div id="L9,10" class="square"></div> 
</div>
<div class="row">
<div id="L10,1" class="square"></div> 
<div id="L10,2" class="square"></div> 
<div id="L10,3" class="square"></div> 
<div id="L10,4" class="square"></div> 
<div id="L10,5" class="square"></div> 
<div id="L10,6" class="square"></div> 
<div id="L10,7" class="square"></div> 
<div id="L10,8" class="square"></div> 
<div id="L10,9" class="square"></div> 
<div id="L10,10" class="square"></div> 
</div>
</div>
</div>
<!-- <!SHIPS ARE HERE> -->
<div id="ships">
<!-- <!size 4> -->
<div class="shipDiv">
<img src="./pic/4ruutu.png"  id="fourDep" class="fourDep"  alt="4-Square ship for deployment" )"/>
</div>
<!size 3>
<div class="shipDiv">
<div class="threeDepWrap">
<img id ="threeDep1" src="./pic/3ruutu.png" class="threeDep" alt="3-Square ship for deployment"/>
</div>
<div class="threeDepWrap">
<img id="threeDep2" src="./pic/3ruutu.png" class="threeDep" alt="3-Square ship for deployment"/>
</div>
</div>
<!size 2>
<div class="shipDiv">
<div class="twoDepWrap">
<img id="twoDep1" src="./pic/2ruutu.png" class="twoDep" alt="2-Square ship for deployment"/>
</div>
<div class="twoDepWrap">
<img id="twoDep2" src="./pic/2ruutu.png" class="twoDep" alt="2-Square ship for deployment"/>
</div>
<div class="twoDepWrap">
<img id="twoDep3" src="./pic/2ruutu.png" class="twoDep" alt="2-Square ship for deployment"/>
</div>
</div>
<!size 1>
<div class="shipDiv">
<div class="oneDepWrap">
<img id="oneDep1" src="./pic/1ruut.png" class="oneDep" alt="1-Square ship for deployment"/>
</div>
<div class="oneDepWrap">
<img id="oneDep2" src="./pic/1ruut.png" class="oneDep" alt="1-Square ship for deployment"/>
</div>
<div class="oneDepWrap">
<img id="oneDep3" src="./pic/1ruut.png" class="oneDep" alt="1-Square ship for deployment"/>
</div>
<div class="oneDepWrap">
<img id="oneDep4" src="./pic/1ruut.png" class="oneDep" alt="1-Square ship for deployment"/>
</div>
</div>
</div>
<div id="rGridWrapper" class="gridDivWrapper">
<div id="rGrid" class="gridDiv">
<div class="row">
<div id=R1,1 class="rsquare"></div> 
<div id=R1,2 class="rsquare"></div> 
<div id=R1,3 class="rsquare"></div> 
<div id=R1,4 class="rsquare"></div> 
<div id=R1,5 class="rsquare"></div> 
<div id=R1,6 class="rsquare"></div> 
<div id=R1,7 class="rsquare"></div> 
<div id=R1,8 class="rsquare"></div> 
<div id=R1,9 class="rsquare"></div> 
<div id=R1,10 class="rsquare"></div> 
</div>
<div class="row">
<div id="R2,1" class="rsquare"></div> 
<div id="R2,2" class="rsquare"></div> 
<div id="R2,3" class="rsquare"></div> 
<div id="R2,4" class="rsquare"></div> 
<div id="R2,5" class="rsquare"></div> 
<div id="R2,6" class="rsquare"></div> 
<div id="R2,7" class="rsquare"></div> 
<div id="R2,8" class="rsquare"></div> 
<div id="R2,9" class="rsquare"></div> 
<div id="R2,10" class="rsquare"></div> 
</div>
<div class="row">
<div id=R3,1 class="rsquare"></div> 
<div id=R3,2 class="rsquare"></div> 
<div id=R3,3 class="rsquare"></div> 
<div id=R3,4 class="rsquare"></div> 
<div id=R3,5 class="rsquare"></div> 
<div id=R3,6 class="rsquare"></div> 
<div id=R3,7 class="rsquare"></div> 
<div id=R3,8 class="rsquare"></div> 
<div id=R3,9 class="rsquare"></div> 
<div id=R3,10 class="rsquare"></div> 
</div>
<div class="row">
<div id=R4,1 class="rsquare"></div> 
<div id=R4,2 class="rsquare"></div> 
<div id=R4,3 class="rsquare"></div> 
<div id=R4,4 class="rsquare"></div> 
<div id=R4,5 class="rsquare"></div> 
<div id=R4,6 class="rsquare"></div> 
<div id=R4,7 class="rsquare"></div> 
<div id=R4,8 class="rsquare"></div> 
<div id=R4,9 class="rsquare"></div> 
<div id=R4,10 class="rsquare"></div> 
</div>
<div class="row">
<div id=R5,1 class="rsquare"></div> 
<div id=R5,2 class="rsquare"></div> 
<div id=R5,3 class="rsquare"></div> 
<div id=R5,4 class="rsquare"></div> 
<div id=R5,5 class="rsquare"></div> 
<div id=R5,6 class="rsquare"></div> 
<div id=R5,7 class="rsquare"></div> 
<div id=R5,8 class="rsquare"></div> 
<div id=R5,9 class="rsquare"></div> 
<div id=R5,10 class="rsquare"></div> 
</div>
<div class="row">
<div id=R6,1 class="rsquare"></div> 
<div id=R6,2 class="rsquare"></div> 
<div id=R6,3 class="rsquare"></div> 
<div id=R6,4 class="rsquare"></div> 
<div id=R6,5 class="rsquare"></div> 
<div id=R6,6 class="rsquare"></div> 
<div id=R6,7 class="rsquare"></div> 
<div id=R6,8 class="rsquare"></div> 
<div id=R6,9 class="rsquare"></div> 
<div id=R6,10 class="rsquare"></div> 
</div>
<div class="row">
<div id=R7,1 class="rsquare"></div> 
<div id=R7,2 class="rsquare"></div> 
<div id=R7,3 class="rsquare"></div> 
<div id=R7,4 class="rsquare"></div> 
<div id=R7,5 class="rsquare"></div> 
<div id=R7,6 class="rsquare"></div> 
<div id=R7,7 class="rsquare"></div> 
<div id=R7,8 class="rsquare"></div> 
<div id=R7,9 class="rsquare"></div> 
<div id=R7,10 class="rsquare"></div> 
</div>
<div class="row">
<div id=R8,1 class="rsquare"></div> 
<div id=R8,2 class="rsquare"></div> 
<div id=R8,3 class="rsquare"></div> 
<div id=R8,4 class="rsquare"></div> 
<div id=R8,5 class="rsquare"></div> 
<div id=R8,6 class="rsquare"></div> 
<div id=R8,7 class="rsquare"></div> 
<div id=R8,8 class="rsquare"></div> 
<div id=R8,9 class="rsquare"></div> 
<div id=R8,10 class="rsquare"></div> 
</div>
<div class="row">
<div id=R9,1 class="rsquare"></div> 
<div id=R9,2 class="rsquare"></div> 
<div id=R9,3 class="rsquare"></div> 
<div id=R9,4 class="rsquare"></div> 
<div id=R9,5 class="rsquare"></div> 
<div id=R9,6 class="rsquare"></div> 
<div id=R9,7 class="rsquare"></div> 
<div id=R9,8 class="rsquare"></div> 
<div id=R9,9 class="rsquare"></div> 
<div id=R9,10 class="rsquare"></div> 
</div>
<div class="row">
<div id=R10,1 class="rsquare"></div> 
<div id=R10,2 class="rsquare"></div> 
<div id=R10,3 class="rsquare"></div> 
<div id=R10,4 class="rsquare"></div> 
<div id=R10,5 class="rsquare"></div> 
<div id=R10,6 class="rsquare"></div> 
<div id=R10,7 class="rsquare"></div> 
<div id=R10,8 class="rsquare"></div> 
<div id=R10,9 class="rsquare"></div> 
<div id=R10,10 class="rsquare"></div> 
</div>
</div>
</div>
</div>
</div>
<div id="jalusOuterDiv">
<div id="jalus">
<div class="btnsDiv" id="pauseDiv">
<button id ="pausePlayBtn" class="btn">Peata</button>
</div>
</div>
</div>
<audio id="soundHolder"/>
</body>

</html>